<template>
    <div class="Con">
        <div class="Con_head">
            <h2>门店配置</h2>
        </div>
        <div class="Con_Tan_one">
            <el-dialog
                :visible.sync="dialogVisible_one"
                width="70%"
                text-align= "center"
                :before-close="handleClose">
                <div class="Con_Tan_one_zhu">
                    <div class="Con_Tan_one_head">
                        <div><p v-for="(item,index) in arrs" :key='index' @click="L_fen(item)">{{item}}</p></div>
                        <div>
                            <p></p>
                            <p>选择照片</p>
                            <p>
                                <input type="text" placeholder="请输入名称" name="" v-model="sou" id="">
                                <i class="el-icon-search" @click="L_config_sou()"></i>
                            </p>
                        </div>
                    </div>
                    <div class="Con_Tan_one_main">
                        <div><p><span></span><span>未分组</span><span>{{L_Config_List.length}}</span></p></div>
                        <div>
                            <dl v-for="item in L_Config_List" :key="item.id">
                                <dt><img :src="item.img" alt=""></dt>
                                <dd>
                                    {{item.name}}{{item.lie}}
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
                <div class="Con_Tan_one_foot">
                    <div></div>
                    <div>
                        <p>
                            <el-pagination
                            background
                            :total="L_Config_List.length">
                            </el-pagination>
                        </p>
                        <p></p>
                    </div>
                </div>
                </el-dialog>
        </div>
        <div class="Con_Tan_two">
            <el-dialog
            :visible.sync="dialogVisible_two"
            width="60%"
            :before-close="handleClose">
            <div class="Con_Tan_two_head">分组管理</div>
            <div class="Con_Tan_two_main">
                <div>
                    <p><button @click="L_zeng()">新增</button></p>
                    <p><span></span><input type="text" name="" id="" placeholder="请输入名称"><i class="el-icon-search"></i></p>
                </div>
                <table>
                    <thead>
                        <tr>
                            <th style="width:135px">分组名称</th>
                            <th>启用</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in L_Config_List_two" :key="index">
                            <td>{{item}}</td>
                            <td>
                                <el-switch
                            v-model="value"
                            active-color="#13ce66"
                            inactive-color="#ff4949"></el-switch>
                            </td>
                            <td>2021-03-31</td>
                            <td><i class="el-icon-edit"></i></td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td><p><input type="text" placeholder="请输入名称" name="" id="" v-model="zeng"><i class="el-icon-check"></i></p></td>
                            <td><el-switch
                            v-model="value"
                            active-color="#13ce66"
                            inactive-color="#ff4949">
                            </el-switch></td>
                            <td>2021-03-31</td>
                            <td><i class="el-icon-edit"></i></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            </el-dialog>
        </div>
        <div class="Con_main">
            <div>
                <p @click="L_qie(index)" v-for="(item,index) in arr" :key="index" :class="index===actives?'active':''">{{item}}</p>
            </div>
            <div class="L_img">
                <img src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2583275964,2440658935&fm=11&gp=0.jpg" alt="">
            </div>
        </div>
        <div class="Con_foot">
            <button>提交</button>
        </div>
    </div>
</template>

<script>
import {mapState} from 'Vuex'
export default {
    data() {
        return {
            arr:['海报','选择图片'],
            actives:1,
            value: true,
            dialogVisible_one:false,
            dialogVisible_two:false,
            arrs:['分组管理','上传照片'],
            zeng:"",
            sou:""
        }
    },
    created() {
        //获取配置页的初始数据
        this.$store.dispatch("config/L_Config_chu")
    },
    computed:{
        ...mapState("config",['L_Config_List','L_Config_List_two'])
    },
    methods: {
        //点击搜索图片
        L_config_sou(){
            if(this.sou===''){
                alert("搜索框不能为空")
            }else{
                this.$store.dispatch("config/L_Config_sou",this.sou)
            }
        },
        //点击新增
        L_zeng(){
            if(this.zeng===''){
                alert("输入框不能为空")
            }else{
                this.$store.dispatch("config/L_Config_zeng",this.zeng)
                this.zeng=''
                console.log(this.L_Config_List_two)
            }
        },
        //点击分组管理弹出第二次的弹框
        L_fen(item){
            if(item==='分组管理'){
                // this.dialogVisible_one=false
                this.dialogVisible_two=true
            }
        },
        //点击选择图片弹出第一次弹框
        L_qie(num){
            if(num===1){
                this.dialogVisible_one=true
            }
            this.actives=num
        },
        //第一层弹框的关闭判断
        handleClose(done) {
        this.$confirm('确认关闭？')
            .then(_ => {
            done();
            })
            .catch(_ => {});
        }
    },
}
</script>

<style>
.Con{
    width: 100%;
    height: 100%;
    background: #F3F3F3;
    position: absolute;
    top: 131px;
    left: 220px;
}
.Con_head{
    width: 80%;
    background: #E7EAED;
    line-height: 40px;
    padding-left: 20px;
    color: #A9A6A7;
}
.Con_main{
    width: 300px;
    height: 240px;
    background: #fff;
    margin-left: 100px;
    margin-top: 30px;
}
.Con_main>div:first-child{
    display: flex;
    justify-content: space-around;
}
.Con_main>div:first-child>p{
    padding: 5px 20px;
}
.Con_foot>button{
    padding: 10px 40px;
    margin-left: 400px;
    margin-top: 100px;
    background: #169BD5;
    color: #fff;
    border: none;
    border-radius: 10px;
}
.active{
    background: #169BD5;
    color: #fff;
    border-radius: 10px;
}
.Con_main>div>img{
    width: 120px;
    margin-left: 170px;
    margin-top: 30px;
}

.el-dialog__body{
    width: 500px;
    height: 500px;
}
.el-dialog{
    width: 50%;
}
.Con_Tan_one_zhu{
    width: 600px;
    margin-left: 240px;
    height: 90%;
}
.Con_Tan_one_zhu,.Con_Tan_one_head{
    border: 1px solid #000;
}
.Con_Tan_one_head{
    margin-top: -2px;
    width: 100%;
    display: flex;
    padding: 5px 20px; 

}
.Con_Tan_one_head>div{
    display: flex;
}
.Con_Tan_one_head>div:first-child{
    border-right: 1px solid #000;
    display: flex;
    width: 39%;
    justify-content: space-around;
}
.Con_Tan_one_head>div:last-child{
    width: 60%;
    display: flex;
    justify-content: space-between;
    padding-top: 7px;
}
.Con_Tan_one_head>div:last-child>p>input{
    border: 1px solid #000;
    border-right: none;
}
.Con_Tan_one_head>div:last-child>p>i{
    border: 1px solid #000;
    border-left: none;
    line-height: 21px;
}
.Con_Tan_one_head>div:first-child>p{
    background: #169BD5;
    color: #fff;
    border-radius: 5px;
    padding: 5px;
}
.Con_Tan_one_main{
    display: flex;
    height: 100%;
}
.Con_Tan_one_main>div:first-child{
    border-right: 1px solid #000;
}
.Con_Tan_one_main>div:first-child{
    flex: 4;
    height: 91%;
    
}
.Con_Tan_one_main>div:first-child>p{
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    border: 1px solid #000;
}
.Con_Tan_one_main>div:last-child{
    flex: 6;
}
.Con_Tan_one_main>div:last-child{
    display: flex;
}
.Con_Tan_one_main>div:last-child>dl{
    text-align: center;
    padding: 10px 15px;
}
.Con_Tan_one_foot{
    margin-top: 20px;
    margin-left: -500px;
    width: 130%;
    display: flex;
    justify-content: space-between;
}
.Con_Tan_one_foot>div:last-child{
    margin-bottom: 20px;
    display: flex;
}
.Con_Tan_one_foot>div:first-child{
    width: 250px;
}
.el-dialog__body{
    width: 100%;
}
.Con_Tan_two_head{
    text-align: center;
    margin-bottom: 20px;
}
.Con_Tan_two_main>div{
    width: 50%;
    margin-left: 200px;
    display: flex;
}
.Con_Tan_two_main>div>p:first-child{
    flex: 3;
    border: 1px solid #000;
    padding: 5px ;
}
.Con_Tan_two_main>div>p:first-child>button{
    background: #169BD5;
    padding: 3px 30px;
    margin-left: 10px;
    color: #fff;
    border: none;
    border-radius: 5px;
}
.Con_Tan_two_main>div>p:last-child{
    flex: 7;
    border: 1px solid #000;
    display: flex;
    padding: 5px ;
}
.Con_Tan_two_main>div>p:last-child>span{
    flex: 1;
}
.Con_Tan_two_main>div>p:last-child>i{
    padding-top: 5px;
    border: 1px solid #000;
    border-left: none;
    padding-right: 5px;
}
.Con_Tan_two_main>div>p:last-child>input{
    border: 1px solid #000;
    border-right: none;
}
.Con_Tan_two_main>table{
    width: 50%;
    margin-left: 200px;
    border: 1px solid #000;
    border-collapse: collapse;
    line-height: 35px;
}
.Con_Tan_two_main>table>tbody>tr>td{
    border: 1px solid #000;
    text-align: center;
}
.Con_Tan_two_main>table>tbody>tr>td>i{
    color: #58AAFF;
}
.Con_Tan_two_main>table>thead>tr>th{
    border: 1px solid #000;
}
.Con_Tan_two_main>table>tfoot>tr>td{
    text-align: center;
    border: 1px solid #000;
    padding: 10px 0;
}
.Con_Tan_two_main>table>tfoot>tr>td>p{
    display: flex;
}
.Con_Tan_two_main>table>tfoot>tr>td>p>i{
    padding-top: 2px;
    color: #58AAFF;
}
.Con_Tan_two_main>table>tfoot>tr>td>i{
    color: #58AAFF;
}
.Con_Tan_two_main>table>tfoot>tr>td>p>input{
    width: 80px;
    height: 20px;
    margin:0 10px;
}
</style>


